<template>
	<view class="content" @touchmove.stop.prevent="moveHandle">
		<view class="nav">
			<view class="nav_icon" style="left: 0;" @click="back">
				<image src="../../static/editImg/return.png" style="width: 48rpx;height: 76rpx;"></image>
			</view>
			EDITOR
			<view class="nav_icon" style="right: 0;" @click="getImage">
				<image src="../../static/editImg/dowenLoad.png" style="width: 74rpx;height: 86rpx;"></image>
			</view>
		</view>
		<view style="width: 100%;height: 780rpx;display: flex;align-items: center;justify-content: center;margin: 50rpx auto;"> 
			<view class="imgMain" v-if="!baseImg">
				<view class="addPic" @click="pushImg" ><image src="../../static/editImg/plus.png" style="width: 104rpx;height: 104rpx;"></image></view>
				<image :src="watermarkBase[watermark -1]" style="width: 100%;z-index: 4;" mode="widthFix"></image>
			</view>
			<view class="imgMain2" v-else>
				<view ref="card" style="max-height: 780rpx;overflow: hidden;">
					<!-- 原始图片 -->
							<image class="cont-box" :src="baseImg" v-if="baseImg" style="width: 100%; z-index: 3;position: relative; display: block;top: 0;" mode="widthFix"></image>
							<!-- 水印 -->
							<view style="width: 100%;height: 100%; z-index: 4;position: absolute;top: 0;left: 0;" class="shuiyin" :style="{backgroundImage:'url(' + watermarkBase[watermark -1] + ')', backgroundRepeat:'repeat', backgroundSize: '100%'}"></view>
							<movable-area  style="width: 95%;height: 95%; z-index: 5;position: absolute;top: 0;left: 0;" >
								<!-- 贴纸 -->
								<movable-view direction="all" scale :x="stickerX" :y="stickerY" v-show="sticker != 0">
									<view  @click="changeItem(1)" class="borderStyle" :class="{TAIDown : startDown}" style="z-index: 10;width: 103rpx;height: 107rpx;position: absolute;">
										<view class="close" @click="close('sticker')" v-if="!startDown"><image src="../../static/editImg/close.png" style="width: 15rpx;height: 15rpx;"></image></view>
										<image :src="stickerBase[sticker - 1]" style="z-index: 10;width: 103rpx;height: 107rpx;"></image>
									</view>
								</movable-view>
								<!-- 文本 -->
								<movable-view @click="changeItem(2)" direction="all" scale :x="textX" :y="textY" v-show="text.content">
									<text :style="{color: colorList[text.colorID]}" class="imgText borderStyle" :class="{TAIDown :startDown}" style="z-index: 10;position: absolute;height: 60rpx;min-width: 60rpx;">{{text.content}}						
										<view class="close" @click="close('text')" v-if="!startDown"><image src="../../static/editImg/close.png" style="width: 15rpx;height: 15rpx;"></image></view>
									</text>
								</movable-view>
							</movable-area>
					
				</view>
			</view>
			
		</view>
		<view class="chooseStyle">
			<view class="tabList">
				<view class="tabItem" v-for="(item, index) in tabList" :key="index" :class="{'modileItem' : index == 1, 'checkItem': checkIndex == index}" @click="changeItem(index)">{{ item }}</view>
			</view>
			<view class="makeList">
				<view v-show="checkIndex == 0"  style="padding: 30rpx 50rpx 0;box-sizing: border-box;">
					<scroll-view scroll-x>
						<view class="watermarkList" :show-scrollbar="false" :enhanced="true" >
							<view v-for="(item, index) in 6" :key="index" class="watermarkItem" @click="chengeWate(item)">
								<image :src="`../../static/watermark/watermark${item}.png`" style="width: 100%;height: 100%;"></image>
								<view class="checkWate" v-show="watermark == item">
									<image src="../../static/editImg/checkItem.png" style="width: 48rpx;height: 38rpx;"></image>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view v-show="checkIndex == 1" style="padding: 30rpx 50rpx 0;box-sizing: border-box;">
					<scroll-view scroll-x>
						<view class="watermarkList">
							<view v-for="(item, index) in 6" :key="index" class="watermarkItem stickerItem" @click="chengeSticker(item)">
								<image :src="`../../static/sticker/sticker${item}.png`" style="width: 103rpx;height: 107rpx;"></image>
								<view class="checkWate" v-show="sticker == item">
									<image src="../../static/editImg/checkItem.png" style="width: 48rpx;height: 38rpx;"></image>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view v-show="checkIndex == 2" class="textInput">
					<view class="inputCon">
						<input :value="textDemo.content" class="uni-input" placeholder="Please" placeholder-class="pcs" maxlength="10" @input="inpueText"/>
						<view class="send" @click="send">DONE</view>
					</view>
					<view class="checkColor">
						<view v-for="(item, index) in colorList" :key="index" class="colorItem" :class="{checkColorItem: textDemo.colorID == index}" :style="{background : item}"  @click="chengeColor(index)"></view>
					</view>
				</view>
			</view>
		</view>
		<canvas id="watermark-canvas" class="watermark-canvas" canvas-id="watermark-canvas" type="2d" :style="{ width: canvasWidth, height: canvasHeight}"></canvas>		
		<!-- 保存成功 -->
		<view class="saveSuccess" @touchmove.stop.prevent="moveHandle" v-if="showSuccess">
			<view class="card">
				<image src="../../static/editImg/SaveSucc.png" style="margin-top: 50rpx;width: 144rpx;height: 144rpx;"></image>
				<text style="margin-top: 18rpx;">SAVE</text>
				<text style="margin-top: 18rpx;">SUCCESSFULLY</text>
			</view>
		</view>
		<!-- 金币不足 -->
		<view class="saveSuccess" @touchmove.stop.prevent="moveHandle" v-if="noCoins">
			<view class="card" style="height: 400rpx;">
				<image src="../../static/editImg/saveFail.png" style="margin-top: 50rpx;width: 144rpx;height: 144rpx;"></image>
				<text style="margin-top: 18rpx;">Not enough coins！</text>
				<view class="store" @click="closeCoins">OK</text>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		pathToBase64,   
		base64ToPath
	} from 'image-tools'
	import html2canvas from "html2canvas"
	import {watermark1, watermark2, watermark3, watermark4, watermark5, watermark6, sticker1, sticker2, sticker3, sticker4, sticker5, sticker6 } from './imageList.js'
	export default {
		data() {
			return {
				tabList: ['WATERMARK', 'STICKER', 'TEXT' ],
				colorList: ['#C9FF2F', '#FF5656', '#3AFF42', '#FFE81A', '#3C2EC3', '#161616', '#FFFFFF' ],
				checkIndex: 0,
				watermark: 1,
				sticker: 0,
				text: {colorID: 0, content: ''},
				textDemo: {colorID: 0, content: ''},
				baseImg: '',
				imgUploadUrl: '',
				canvasWidth: 0,
				canvasHeight: 0,
				stickerX: 100,
				stickerY: 100,
				stickerScale: 1,
				textX: 100,
				textY: 100,
				textScale: 1,
				showSuccess: false,
				ProportionX: 1,
				ProportionY: 1,
				textWidth: '60rpx',
				BL: 1,
				watermarkBase: [],
				stickerBase: [],
				icons: 0,
				startDown: false,
				BGIHeight: 0,
				noCoins: false,
			}
		},
		onLoad() {
			this.watermarkBase = [watermark1, watermark2, watermark3, watermark4, watermark5, watermark6]
			this.stickerBase = [sticker1, sticker2, sticker3, sticker4, sticker5, sticker6]
		},
		onShow() {
			this.icons = uni.getStorageSync('PicEditIcon')
			if (this.noCoins && this.icons >= 10) {
				this.noCoins = false
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			changeItem(index) {
				this.checkIndex = index
				this.textDemo = {colorID: 0, content: ''}
			},
			chengeWate(item) {
				this.watermark = item
			},
			chengeColor(index) {
				this.textDemo.colorID = index
				this.text.colorID = index
			},
			chengeSticker(item) {
				if(!this.baseImg) {
					uni.showToast({
						icon: 'none',
						title: "Please upload pictures"
					})
					return
				}
				this.sticker = item
			},
			pushImg() {
				window['picture'] = (data)=>{
					this.baseImg = data
				}
				window['send'](`terms://photo?type=${0}`);
			},
			saveImg(img) {
				window['reducedCoins'] = (data) => {
				    if (data === "1") {
						uni.hideLoading()
				    } else {
				        // this.showSuccess = true
						this.startDown = false
						uni.setStorageSync( 'PicEditIcon', this.icons - 10)
				        setTimeout(() => {
				        	this.resize()
				        },1500)
				    }
					
				}
				window['album'](0, img);
			},
			inpueText(e) {
				this.textDemo.content = e.detail.value
			},
			send() {
				if(!this.baseImg) {
					uni.showToast({
						icon: 'none',
						title: "Please upload pictures"
					})
					return
				}
				if(!this.textDemo.content) {
					uni.showToast({
						icon: 'none',
						title: 'Please enter text'
					})
					return
				}
				this.text = {...this.textDemo}
				this.textDemo.content = ''
			},
			close(type) {
				if(type == 'sticker') {
					this.sticker = 0
				}else {
					this.text = {colorID: 0, content: ''}
				}
				
			},
			moveHandle() {},
			getImage() {
				if(!this.baseImg) {
					uni.showToast({
						icon: 'none',
						title: "Please upload pictures"
					})
					return
				}
				if (this.icons < 10) {
					this.noCoins = true
					// uni.navigateTo({
					// 	url: '/pages/index/store'
					// })
					return
				}
				uni.showModal({
					content: 'Downloading pictures requires 10 coins',
					cancelText: 'Cancel',
					confirmText: 'Confirm',
					success: res => {
						if (res.confirm) {
							this.dowenLoad()
						}
					}
				});
				
			},
			dowenLoad() {
				// uni.showLoading({
				// 	title: "Saving...",
				// 	mask: true
				// })
				this.startDown = true
				this.$nextTick(() => {
					const cardElement = this.$refs.card.$el;
					html2canvas(cardElement).then((canvas) => {
						const imageData = canvas.toDataURL('image/png');
						this.saveImg(imageData)
					})
				})
			},
			gotoStore() {
				uni.navigateTo({
					url: '/pages/index/store'
				})
			},
			resize() {
				this.baseImg = ''
				this.sticker = 0
				this.text = {colorID: 0, content: ''}
				this.checkIndex = 0
				this.watermark = 1
				this.icons = uni.getStorageSync('PicEditIcon')
				uni.hideLoading()
			},
			closeCoins() {
				this.noCoins = false
			}
		}
	}
</script>

<style scoped>
	@import url('../../static/fontFamily/stylesheet.css');
	.content {
		width: 100vw;
		min-height: 100vh;
		background: linear-gradient( 180deg, #010101 0%, #3C2EC7 100%);
		box-sizing: border-box;
		font-family: BungeeRegular;
		color: #FFFFFF;
		overflow: hidden;
	}
	.nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100vw;
		height: 116rpx;
		background: #FFFFFF;
		border: 12rpx solid #000000;
		text-align: center;
		position: relative;
		box-sizing: border-box;
		margin-top: 116rpx;
		font-family: BungeeRegular;
		font-weight: 400;
		font-size: 66rpx;
		color: #0E0B2C;
	}
	.nav_icon {
		position: relative;
		width: 150rpx;
		height: 150rpx;
		background: #FFFFFF;
		border: 12rpx solid #000000;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.imgMain {
		width: 630rpx;
		height: 780rpx;
		background: #18A9A5;
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		border: 12rpx solid #000000;
		position: relative;
		overflow: hidden;
	}
	.imgMain2 {
		width: 630rpx;
		max-height: 780rpx;
		background: #18A9A5;
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		border: 12rpx solid #000000;
		/* margin: 56rpx auto; */
		position: relative;
		overflow: hidden !important;
	}
	.imgDown {
		border-radius: 0 !important;
		border: 12rpx solid transparent !important;
	}
	.chooseStyle {
		height: 450rpx;
		display: flex;
		flex-direction: column;
		width: 100vw;
		position: fixed;
		bottom: 50rpx;
		left: 0;
	}
	.tabList {
		display: flex;
		background-color: #fff;
		height: 110rpx;
		line-height: 110rpx;
		font-family: BungeeRegular;
		font-weight: 400;
		font-size: 32rpx;
		color: #000000;
		border-top: 12rpx solid #000000;
		border-bottom: 12rpx solid #000000;
	}
	.tabItem {
		flex: 1;
		text-align: center;
	}
	.modileItem {
		border-left: 12rpx solid #000000;
		border-right: 12rpx solid #000000;
	}
	.checkItem {
		color: #21FFF2;
		background-color: #000000;
	}
	.makeList {
		flex: 1;
		width: 100%;
		color: #FFFFFF;
	}
	.watermarkList {
		display: flex;
		/* flex-wrap: wrap; */
		/* justify-content: space-around; */
		width: 100%;
		box-sizing: border-box;
	}
	.watermarkItem {
		flex-shrink: 0;
		width: 172rpx;
		height: 250rpx;
		border: 12rpx solid #000000;
		/* margin-bottom: 56rpx; */
		position: relative;
		background-color: #fff;
		margin-right: 40rpx;
	}
	.checkWate {
		position: absolute;
		bottom: -12rpx;
		right: -12rpx;
		width: 74rpx;
		height: 74rpx;
		background-color: #000000;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.addPic {
		width: 292rpx;
		height: 292rpx;
		border-radius: 146rpx;
		background-color: #000000;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 9;
	}
	.imgMain>image {
		position: absolute;
		top: 0;
		left: 0;
	}
	.imgMain2>image {
		position: absolute;
		top: 0;
		left: 0;
	}
	.watermark-canvas {
		visibility:hidden;
		position: absolute;
		top: 0;
		left: 0;
		transform: scale(0.001);
	}
	.stickerItem {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.textInput {
		padding: 45rpx 60rpx;
		box-sizing: border-box;
	}
	.inputCon {
		width: 100%;
		height: 110rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 12rpx solid #000000;
		display: flex;
		align-items: center;
	}
	.uni-input{
		display: block;
		flex: 1;
		height: 100%;
		font-family: BungeeRegular;
		font-weight: 400;
		font-size: 32rpx;
		color: #000000;
		padding: 0 26rpx;
		box-sizing: border-box;
	}
	.send {
		width: 160rpx;
		height: 100%;
		background: #000000;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 12rpx solid #000000;
		font-family: BungeeRegular;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.pcs {
		font-family: BungeeRegular;
		font-weight: 400;
		font-size: 32rpx;
	}
	.checkColor {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 52rpx;
	}
	.colorItem {
		width: 48rpx;
		height: 48rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 12rpx solid #000000;
	}
	.checkColorItem {
		border: 12rpx solid #21FFF2;
	}
	.imgText {
		font-weight: 400;
		font-size: 56rpx;
		white-space:nowrap;
	}
	.borderStyle {
		border: 2rpx dashed #efefef;
		position: relative;
	}
	.TAIDown {
		border: 0;
		
	},
	.close {
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		top: -30rpx;
		right: -30rpx;
		border-radius: 15rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #000000;
		
	}
	.card {
		width: 516rpx;
		height: 350rpx;
		background: #FFFFFF;
		border-radius: 56rpx 56rpx 56rpx 56rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-family: BungeeRegular;
		font-weight: 400;
		font-size: 42rpx;
		color: #000000;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.saveSuccess {
		z-index: 999;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
	}
	.imgNew {
		height: auto !important;
	}
	.YSImage {
		height: 100% !important;
	}
	.Image2Show {
		padding-top: 260rpx;
		box-sizing: border-box;
	}
	.store {
		width: 205rpx;
		height: 50rpx;
		background: #000000;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 11rpx solid #000000;
		text-align: center;
		line-height: 50rpx;
		font-weight: 400;
		font-size: 50rpx;
		color: #fff;
		margin-top: 22rpx;
	}
	scroll-view ::-webkit-scrollbar{
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
</style>